<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="(swiper) in swiperList" :key="swiper.id" class="swiper-slide">
          <img :src="swiper.swiper_url" alt="" style="width:100%;height:400px">
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination" />

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev" />
      <div class="swiper-button-next" />

      <!-- 如果需要滚动条 -->

    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: 'Carousel',
  props: ['swiperList'],
  data() {
    return {

    }
  },
  watch: {
    swiperList: {
      immediate: true,
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          new Swiper('.swiper-container', {
            // direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            grabCursor: true, // 贴合模式
            // 自动切换
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: false
            },

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination'
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }

          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
